<!--
 * @Author: 周洋 1430536748@qq.com
 * @Date: 2024-08-11 15:30:34
 * @LastEditors: 周洋 1430536748@qq.com
 * @LastEditTime: 2024-08-21 16:34:34
 * @version: 1.2.5
 * @Description: 
-->
<script setup lang="ts">
import { useSlots } from 'vue';
import useState from '@/hooks/useState';
import { modeProps, Emits } from '../props';
import { IconEnum } from '@/enum/iconName/index';
import { SvgIcon } from '@/components/SvgIcon';
const { okText, okIcon, okType, cancelText, cancelIcon, cancelType, title, width, btnIcon, btnText, btnType, btnLink, customClass } = defineProps(modeProps)
const [visible, setVisible] = useState(false);

const slots = useSlots();
//判断默认插槽是否为空
//const isDefaultSlotEmpty = !slots.default;
//判断header插槽是否为空
//const isHeaderSlotEmpty = !slots.header || !slots.header?.length;
//判断footer插槽是否为空
const isFooterSlotEmpty = !slots.footer || !slots.footer?.length;

const emit = defineEmits<Emits>()
const onOpen = () => {
    emit('onOpen')
    setVisible(true);
}
const onCancel = () => {
    emit('onCancel')
    setVisible(false);
}
const onOk = (close: () => void) => {
    emit('onOk', close);
}
</script>
<template>
    <el-button auto-insert-space :link="btnLink" :type="btnType" @click="onOpen">
        <template #icon v-if="btnIcon !== null">
            <SvgIcon :icon="btnIcon" />
        </template>
        {{ btnText }}
    </el-button>
    <el-dialog :custom-class="customClass" v-model="visible" destroy-on-close append-to-body draggable :width="width"
        :before-close="onCancel">
        <template #header>
            <span class="dialogTitle">
                <SvgIcon :icon="IconEnum.TITLE" />
                {{ title }}
            </span>
        </template>
        <slot />
        <template #footer>
            <slot name="footer" v-if="!isFooterSlotEmpty" />
            <div class="footer" v-else>
                <el-button auto-insert-space :type="cancelType" @click="onCancel">
                    <template #icon v-if="cancelIcon !== null">
                        <SvgIcon :icon="cancelIcon" />
                    </template>
                    {{ cancelText }}
                </el-button>
                <el-button auto-insert-space :type="okType" @click="onOk(onCancel)">
                    <template #icon v-if="okIcon !== null">
                        <SvgIcon :icon="okIcon" />
                    </template>
                    {{ okText }}
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<style scoped lang="scss">
.dialogTitle {
    color: var(--el-color-primary);
    font-weight: bold;
    font-size: 18px;
}
</style>